<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
  <title>发起流程</title>
  <div th:replace="common/link::header"></div>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <form class="layui-form layui-card-header layuiadmin-card-header-auto">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">流程名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" placeholder="请输入流程名称" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <button type="button" class="layui-btn layuiadmin-btn-useradmin" lay-submit lay-filter="search">
                        <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                    </button>
                    <button type="reset" class="layui-btn layui-btn-primary" lay-submit lay-filter="reset">重置</button>
                </div>
            </div>
            <div class="layui-form-item layui-hide">
                <input type="button" lay-submit lay-filter="save-submit" id="save-submit" value="确认">
            </div>
        </form>
        <div class="layui-card-body">
            <div class="layui-row">
                <div class="layui-col-md6">
                    <table id="flowTable" lay-filter="flowTable"></table>
                </div>
                <div class="layui-col-md6">
                    <div class="layui-tab">
                        <ul class="layui-tab-title">
                            <li class="layui-this">表单</li>
                            <li>办理人</li>
                            <li>流程图</li>
                        </ul>
                        <div class="layui-tab-content">
                            <div class="layui-tab-item layui-show">
                                <div class="layui-fluid">
                                    <div class="layui-row">
                                        <form class="layui-form layui-form-pane" lay-filter="flowForm" id="flowForm">
                                            <!--内置表单-->
                                            <div id="flowFormView"></div>
                                            <!--自定义表单-->
                                            <div id="buildWrap"></div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-tab-item">
                                <table id="userTable" lay-filter="userTable"></table>
                            </div>
                            <div class="layui-tab-item">
                                <div align="center">
                                    <img height="100%" width="100%" alt="流程图" id="flowDiagram" onclick="fun.preview(this)" style="display:none;"/>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/html" id="flowFormTpl">
    {{#  layui.each(d, function(index, item){ }}
    {{#  if(item.typeName === 'long'){ }}
    <div class="layui-form-item">
        <label class="layui-form-label">{{item.name}}</label>
        <div class="layui-input-inline">
            <input type="number" lay-verify="required" class="layui-input" name="{{item.id}}" placeholder="请输入{{item.name}}"/>
        </div>
    </div>
    {{#  } else if(item.typeName === 'string') { }}
    <div class="layui-form-item">
        <label class="layui-form-label">{{item.name}}</label>
        <div class="layui-input-inline">
            <input type="text" lay-verify="required" class="layui-input" name="{{item.id}}" placeholder="请输入{{item.name}}"/>
        </div>
    </div>
    {{#  } else if(item.typeName === "date") { }}
    <div class="layui-form-item">
        <label class="layui-form-label">{{item.name}}</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input" name="{{item.id}}" id="{{item.id}}"
                   dateFormat="{{item.datePatterns}}" placeholder="{{item.datePatterns}}" autocomplete="off"/>
        </div>
    </div>
    {{#  } else if(item.typeName === "enum") { }}
    <div class="layui-form-item">
        <label class="layui-form-label">{{item.name}}</label>
        <div class="layui-input-inline">
            <select name="{{item.id}}" lay-verify="required">
                {{#  layui.each(item.values, function(k, v){ }}
                <option value="{{k}}">{{v}}</option>
                {{# });  }}
            </select>
        </div>
    </div>
    {{#  } else if(item.typeName === "boolean") { }}
    <div class="layui-form-item">
        <label class="layui-form-label">{{item.name}}</label>
        <div class="layui-input-inline">
            <input type="radio" name="{{item.id}}" value="Y" title="是">
            <input type="radio" name="{{item.id}}" value="N" title="否">
        </div>
    </div>
    {{#  } else { }}
        <p>未识别表单</p>
    {{#  } }}
    {{#  }); }}
</script>
<div th:replace="common/script::footer"></div>
<script th:src="@{/static/lib/form-builder/form-builder.min.js}"></script>
<script th:src="@{/static/lib/form-builder/form-render.min.js}"></script>
<script th:inline="javascript">
  layui.config({
      base: '/static/layuiadmin/' //静态资源所在路径
  }).extend({
     index: 'lib/index', //主入口模块
  }).use(['index', 'form', 'crud', 'table', 'laytpl', 'laydate'], function(){
    let $ = layui.$,
            form = layui.form,
            table = layui.table,
            laytpl = layui.laytpl,
            laydate = layui.laydate,
            crud = layui.crud;
    // 流程分类
    crud.setSelect("category","actCategory");
    //监听搜索
    form.on('submit(search)', function(data) {
        let field = data.field;
        //执行重载
        table.reload('flowTable', {
            where: field
        });
    });
    //监听重置
    form.on('submit(reset)', function(data) {
        Object.keys(data.field).forEach(key => (data.field[key] = ''));
        table.reload('flowTable', {
            where: data.field
        });
    });
    // 查询列表接口
    table.render({
          elem: '#flowTable'
          ,height: 'full-110'
          ,url:  ctx + '/workFlow/flow'
          ,cellMinWidth: 80
          ,page: true //开启分页,
          ,cols: [[ //表头
              {type: 'radio', align : 'center'},
              {field: 'id', title: 'ID', hide:true},
              {field: 'name', title: '流程名称'},
              {field: 'key', title: 'KEY'},
              {field: 'category', title: "流程分类", templet: function (d) { return crud.getDictValue('actCategory',d.category);}},
              {field: 'version', title: '版本'},
              {field: 'description', title: '描述'},
          ]]
    });
    //监听流程单击事件
    table.on('row(flowTable)', function(obj) {
        // 标注选中样式
        obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
        // 选中radio样式
        obj.tr.find('i[class="layui-anim layui-icon"]').trigger("click");
    });
    // 列表单选监听事件
    table.on('radio(flowTable)',function (obj) {
        // 获取启动流程表单
        getStartForm(obj.data.deploymentId);
        // 获取流程图片
        getFlowDiagram(obj.data.deploymentId);
    });
    // 查询列表接口
    table.render({
        elem: '#userTable',
        height: 'full-110',
        url:  ctx + '/sysUser/page',
        cellMinWidth: 80,
        page: true, //开启分页
        cols: [[ //表头
            {type: 'radio', align : 'center'},
            {field: 'id', title: 'ID', hide:true},
            {field: 'nickName', title: '昵称'},
            {field: 'userName', title: '账户'},
            {field: 'phonenumber', title: '手机号'},
            {field: 'deptName', title: '部门名称'},
            {field: 'postName', title: '岗位名称'},
        ]]
    });
    //监听人员单击事件
    table.on('row(userTable)', function(obj) {
        // 标注选中样式
        obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
        // 选中radio样式
        obj.tr.find('i[class="layui-anim layui-icon"]').trigger("click");
    });
    /**
     * 获取流程图片
     * @param deploymentId 部署ID
     */
    function getFlowDiagram(deploymentId) {
        $("#flowDiagram").show().attr("src", ctx + '/workFlow/getFlowDiagram?deploymentId=' + deploymentId);
    }
    /**
     * 获取启动表单
     * @param deploymentId 部署ID
     */
    function getStartForm(deploymentId) {
        $.ajax({
            type: 'GET',
            url:  ctx + '/workFlow/getStartForm?deploymentId=' + deploymentId,
            contentType:'application/json;charset=UTF-8',
            dataType: 'json',
            success: function(result) {
                layer.msg(result.message);
                if (result.code === 200) {
                    let data = result.data;
                    // 清空内置表单
                    $('#flowFormView').empty();
                    // 清空自定义表单
                    $('#buildWrap').empty();
                    // 外置表单
                    if (data.hasStartFormKey) {
                        $('#buildWrap').formRender({
                            formData: data.formData.key,
                            dataType: 'xml'
                        });
                        return;
                    }
                    // 内置表单
                    let formProperty = data.formProperties;
                    laytpl($("#flowFormTpl").html()).render(formProperty, function(html) {
                        $("#flowFormView").html(html);
                    });
                    $.each(formProperty,function(index,value) {
                        // 日期类型做特殊处理
                        if (value.typeName === 'date') {
                            laydate.render({
                                elem: '#' + value.id,
                                format: value.datePatterns
                            });
                        }
                    });
                    form.render(null, 'flowForm');
                }
            }
        });
    }
    /**
     * 发起流程
     */
    form.on('submit(save-submit)', function(data) {
        let flows = layui.table.checkStatus('flowTable').data;
        let users = layui.table.checkStatus('userTable').data;
        if (flows.length === 0) {
            layer.msg('请选择发起流程');
            return;
        }
        if (users.length === 0) {
            layer.msg('请选择审批人');
            return;
        }
        // 流程部署ID
        let deploymentId = flows[flows.length - 1].deploymentId;
        // 审批人
        let assignee = users[users.length - 1].userName;
        // 表单数据
        let flowForm = $('#flowForm').serialize();
        $.ajax({
            type: 'POST',
            url:  ctx + '/workFlow/start',
            data: JSON.stringify({
                deploymentId,
                flowForm,
                assignee
            }),
            contentType:'application/json;charset=UTF-8',
            dataType: 'json',
            success: function(result) {
              layer.msg(result.message);
              if (result.code === 200) {
                let index = parent.layer.getFrameIndex(window.name);
                // 关闭
                parent.layer.close(index);
                // 刷新
                parent.location.reload();
              }
            }
        });
    });
  });
</script>
</body>
</html>